<template>
  <div class="detail-container">
    <!-- 详情标题 -->
    <DetailTitle :qy-info="props.qyInfo" />
    <!-- 详情标题 -->
    <!--基本信息 -->
    <div class="basicInfo">
      <Title :title-info="titleName" />
      <div class="first">
        <div style="display: flex">
          <span class="label">产业类型 |</span>
          <div
            :title="qyInfo.cylxMc"
            class="text"
            style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
          >
            &nbsp;{{ qyInfo.cylxMc }}
          </div>
        </div>
        <div style="margin-right: 30px">
          <span class="label">成立时间 |</span>
          <span class="text">&nbsp;{{ qyInfo.clsh }}</span>
        </div>
      </div>

      <div class="second">
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 230px;
          "
        >
          <div>
            <span class="label">产 业 链 |</span>

            <el-input v-model="qyInfo.cylMcList" type="textarea" disabled size="large" />
          </div>
          <div>
            <span class="label">经营范围 |</span>
            <el-input v-model="qyInfo.jyfw" type="textarea" disabled size="large" style="" />
          </div>
        </div>
      </div>

      <div class="last">
        <ul>
          <li style="display: flex; justify-content: space-between; margin: 15px 0">
            <span class="label">是否是危险化学品重大危险源&nbsp;|</span>
            <span v-if="qyInfo.sfzdwxy == 1" class="text" style="margin-right: 15px">是</span>
            <span v-else-if="qyInfo.sfzdwxy == 0" class="text" style="margin-right: 15px">否</span>
            <span v-else class="text" style="margin-right: 15px">未采集</span>
          </li>
          <li style="display: flex; justify-content: space-between; margin: 15px 0">
            <span class="label">是否是重点监管化工工艺&nbsp;|</span>
            <span v-if="qyInfo.sfzdgy == 1" class="text" style="margin-right: 15px">是</span>
            <span v-else-if="qyInfo.sfzdgy == 0" class="text" style="margin-right: 15px">否</span>
            <span v-else class="text" style="margin-right: 15px">未采集</span>
          </li>
          <li style="display: flex; justify-content: space-between; margin: 15px 0">
            <span class="label">是否是重点监管危险化学品&nbsp;|</span>
            <span v-if="qyInfo.sfzdhxp == 1" class="text" style="margin-right: 15px">是</span>
            <span v-else-if="qyInfo.sfzdhxp == 0" class="text" style="margin-right: 15px">否</span>
            <span v-else class="text" style="margin-right: 15px">未采集</span>
          </li>
          <div style="display: flex; justify-content: space-between; margin: 15px 0">
            <div class="label" style="width: 60px">备注&nbsp;|</div>
            <div
              class="text"
              style="
                margin-right: 15px;
                word-wrap: break-word;
                word-break: break-all;
                overflow: auto;
                height: 80px;
                width: 380px;
              "
            >
              {{ qyInfo.bz || '无' }}
            </div>
          </div>
        </ul>
      </div>
    </div>
    <div class="contactInfo" style="margin-top: 20px; height: calc(100% - 122px)">
      <Title title-info="联系人信息" />
      <div style="height: calc(92% - 527px); overflow: auto">
        <div v-for="(item, index) in props.qyContactInfo" :key="index" style="margin-bottom: 5px">
          <p class="label">{{ item.ryzw }}</p>

          <ul class="text" style="display: flex; justify-content: space-between">
            <li style="width: 100px; display: flex">
              <el-icon><User /></el-icon>
              <div
                v-if="item.rymc"
                :title="`${item.rymc}`"
                class="cartext"
                v-html="`${item.rymc}`"
              ></div>
              <!-- <span v-if="item.rymc">{{ item.rymc }}</span> -->
              <span v-else>未采集</span>
            </li>
            <li style="width: 115px; display: flex">
              <el-icon><Iphone /></el-icon>
              <div
                v-if="item.ryyddh"
                :title="`${item.ryyddh}`"
                class="cartext"
                v-html="`${item.ryyddh}`"
              ></div>
              <!-- <span v-if="item.ryyddh"> {{ item.ryyddh }}</span> -->
              <span v-else>未采集</span>
            </li>
            <li style="width: 100px; display: flex">
              <el-icon><Phone /></el-icon>
              <div
                v-if="item.ryzbdh"
                :title="`${item.ryzbdh}`"
                class="cartext"
                v-html="`${item.ryzbdh}`"
              ></div>
              <!-- <span v-if="item.ryzbdh">{{ item.ryzbdh }}</span> -->
              <span v-else>未采集</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 信息标题 -->

    <!-- 信息标题 -->
  </div>
</template>

<script setup lang="ts">
import DetailTitle from '@/components/detailTitle/index.vue'
import Title from '@/components/Title/index.vue'
import { User, Iphone, Phone } from '@element-plus/icons-vue'
import { queryQyxxInfo } from '@/service/api'

const titleName = '基本信息'

// 声明props
const props = defineProps({
  qyInfo: {
    type: Object,
    default: () => {},
  },
  qyContactInfo: {
    type: Array,
    default: () => {
      return [
        {
          id: 0,
          ryzw: '法人',
          rymc: '未采集',
          ryyddh: '未采集',
          ryzbdh: '未采集',
        },
        {
          id: 1,
          ryzw: '厂区负责人',
          rymc: '未采集',
          ryyddh: '未采集',
          ryzbdh: '未采集',
        },
        {
          id: 2,
          ryzw: '总安全负责人',
          rymc: '未采集',
          ryyddh: '未采集',
          ryzbdh: '未采集',
        },
        {
          id: 3,
          ryzw: '总生产调度责任人',
          rymc: '未采集',
          ryyddh: '未采集',
          ryzbdh: '未采集',
        },
        {
          id: 4,
          ryzw: '消防安全责任人',
          rymc: '未采集',
          ryyddh: '未采集',
          ryzbdh: '未采集',
        },
      ]
    },
  },
})
</script>

<style lang="less" scoped>
.detail-container {
  width: 460px;
  padding: 15px;
  border: 1px solid #0d609c;
  background: rgba(1, 7, 17, 0.7);
  box-sizing: border-box;
  .label,
  .text {
    color: rgba(0, 191, 191);
    font-size: 16px;
    margin-bottom: 10px;
  }
  .text {
    color: #fff;
    margin-bottom: 14px;
  }

  .basicInfo {
    .first {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .second {
      ::v-deep .el-input__wrapper {
        background-color: #ffffff00;
        border: 1px solid rgba(121, 121, 121, 1);
        .el-input__inner {
          height: 80px;
        }
      }
    }
  }
  .cartext {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /deep/ .el-textarea.is-disabled .el-textarea__inner {
    background: rgba(1, 7, 17, 0);
    height: 86px;
  }
}
</style>
